<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS -->
    <!--[if lt IE 9]>
    <script src="../../js/flot/excanvas.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">

    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- file-input -->
    <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css"/>
    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css"/>
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css"/>
    <!-- datatable -->
    <link rel="stylesheet" href="../../js/datatables/datatable.css">
    <!-- WIZARD -->
    <link rel="stylesheet" type="text/css" href="../../js/bootstrap-wizard/wizard.css"/>
    <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
    <!-- FONTS
<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
    <!-- JQUERY -->
    <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
    <script src="../../js/common.js"></script>
</head>

<body>
<header class="navbar clearfix" id="header">
</header>

<!-- PAGE -->
<section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
        <div class="sidebar-menu nav-collapse">

            <!-- SIDEBAR MENU -->
            <ul>

            </ul>
            <!-- /SIDEBAR MENU -->
        </div>

    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">
        <!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
        <div class="modal fade" id="productpack_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">选择商品</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row" style="height:auto">
                            <label class="control-label col-md-3">产品名称：</label>
                            <div class="col-md-8 inline">
                                <input type="text" class="form-control width-50" name="q" placeholder="请输入产品名称"/>
                                <a class="btn btn-primary searchProduct">查询</a>
                            </div>

                        </div>
                        <div class="form-group" style="height:auto">
                            <table id="productpack_product" cellpadding="0" cellspacing="0" border="0"
                                   class="datatable table table-striped table-bordered table-hover">


                            </table>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                    </div>
                </div>
            </div>
        </div>
        <!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
        <div class="container">
            <div class="row">
                <div id="content" class="col-lg-12">
                    <!-- PAGE HEADER-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-header">
                                <!-- STYLER -->

                                <!-- /STYLER -->
                                <!-- BREADCRUMBS -->
                                <ul class="breadcrumb">
                                    <li>
                                        <i class="fa fa-home"></i>
                                        <a href="index.html">首页</a>
                                    </li>
                                    <li>
                                        <a href="#">商品管理</a>
                                    </li>
                                    <li>维护商品</li>
                                </ul>
                                <!-- /BREADCRUMBS -->

                            </div>
                        </div>
                    </div>
                    <!-- /PAGE HEADER -->
                    <!-- SAMPLE -->
                    <form id="form_pack">
                        <div class="row col-md-12">
                            <div class="box border primary" style="margin-left: 20px;">
                                <div class="box-title">
                                    <h4><i class="fa fa-bars"></i>自选包设置</h4>
                                </div>
                                <div class="box-body big" style="padding:10px;height:auto">
                                    <div class="row" style="margin-top:10px;">
                                        <label class="control-label col-md-3"><span class="required">*</span>礼包名称：</label>
                                        <div class="col-md-8 inline">
                                            <input type="text" class="form-control width-50" name="packTitle" placeholder="请输入礼包名称" maxlength="50"/>
                                            <input type="hidden" name="id"/>
                                            <span class="error-span"></span>
                                        </div>
                                    </div>
                                    <div class="row" id="rangDate">
                                        <label class="control-label col-md-3"><span class="required">*</span>生效日期：</label>
                                        <div class="col-md-6 inline" style="display:inline-flex">
                                            <input type="text" class="form-control width-50 bootstrap-datepicker" name="startDate" style="width:110px"/>-
                                            <input type="text" class="form-control width-50 bootstrap-datepicker" name="endDate" style="width:120px"/>
                                            <span class="error-span"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="control-label col-md-3">使用说明：</label>
                                        <div class="col-md-8 inline">
                                            <textarea name="remark" class="form-control" style="width:320px;resize:none; height:34px"></textarea>
                                            <span class="error-span"></span>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <label class="control-label col-md-3"><span class="required">*</span>礼包金额：</label>
                                        <div class="col-md-8 inline">
                                            <input type="text" class="form-control width-50" name="packPrice" onkeypress="return $.IsDecimal(event);"
                                                   onblur="return $.IsMoney(this);" placeholder="请输入礼包金额" maxlength="10"/>

                                            <span class="error-span"></span>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <label class="control-label col-md-3"><span class="required">*</span>VIP礼包金额：</label>
                                        <div class="col-md-8 inline">
                                            <input type="text" class="form-control width-50" name="packVipPrice" onkeypress="return $.IsDecimal(event);"
                                                   onblur="return $.IsMoney(this);" placeholder="请输入VIP礼包金额" maxlength="10"/>

                                            <span class="error-span"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="control-label col-md-3"><span class="required">*</span>分销礼包金额：</label>
                                        <div class="col-md-8 inline">
                                            <input type="text" class="form-control width-50" name="packDistributionPrice"
                                                   onkeypress="return $.IsDecimal(event);"
                                                   onblur="return $.IsMoney(this);" placeholder="请输入分销礼包金额" maxlength="10"/>

                                            <span class="error-span"></span>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <label class="control-label col-md-3"><span class="required">*</span>商品个数：</label>
                                        <div class="col-md-8 inline">
                                            <input type="text" class="form-control width-50" name="productAmount" onkeypress="return $.IsDecimal(event);"
                                                   onblur="return $.IsMoney(this);" onfocus="this.select()" onmouseover="this.onfocus()"
                                                   placeholder="请输入礼包限制的商品个数" maxlength="10"/>

                                            <span class="error-span"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="control-label col-md-3" style="line-height: 34px;"><span class="required">*</span>是否用券：</label>
                                        <div class="col-md-8 inline">
                                            <input type="checkbox" name="useCoupon" checked="checked"/><span
                                                style="color:red">不选择表示自选包活动不能用券（商品不设置特例品也不可以使用）</span>

                                            <span class="error-span"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="control-label col-md-3" style="line-height: 34px;"><span class="required">*</span>是否叠加</label>
                                        <div class="col-md-8 inline" style="display:flex">
                                            <input type="checkbox" name="cumulative"/>
                                            <span style="width:250px;line-height:34px;color:red">叠加表示满足商品个数时优惠是否累计</span>
                                            <span class="error-span"></span>
                                        </div>
                                    </div>
                                    <div class="row product_list">
                                        <label class="control-label col-md-3"><span class="required">*</span>选择商品：</label>
                                        <div class="col-md-8 inline" style="padding-left: 0px;">
                                            <div class="col-sm-4">

                                                <div class="col-sm-1">
                                                    <a class="btn btn-primary search">选择</a>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-12 product_list">
                                            <div class="box border orange">
                                                <div class="box-title" style="height: 34px">
                                                    <h6 style="margin-top: 4px;">已选择商品</h6>
                                                </div>
                                                <div class="box-body">
                                                    <table id="td_selectproduct" cellpadding="0" cellspacing="0" border="0"
                                                           class="datatable table table-striped table-bordered table-hover">

                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </form>
                    <div class="row" style="height: 30px;">
                        <div class="col-md-12" style="text-align: center;">
                            <div class="box ">
                                <a href="#" class="btn btn-success config bt-submit" style="width: 100px">
                                    保存
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- /SAMPLE -->

            <div class="footer-tools">
								<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
            </div>
        </div>
        <!-- /CONTENT-->
    </div>
    </div>
    </div>
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->

<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
<!--bootbox-->
<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
<!-- spinner -->
<script src="../../js/spinner/spin.js"></script>
<!-- INPUT MASK -->

<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
<!-- DATA TABLES -->
<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>


<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>

<script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
<script src="../../js/jquery-validate/jquery.validate.min.js"></script>
<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>

<script src="../../js/Sortable.min.js"></script>
<script>
    var AddPack = function () {
        var wizform = $('#form_pack');
        var selectProducts = [];//参与活动的商品
        var addProducts = [];//添加活动的商品
        var deleteProducts = [];//删除活动的商品
        var id = null, flag;
        var $mainDataTable = null, $selectedDataTable = null;
        var formValiInit = function () {
            wizform.validate({
                doNotHideMessage: true,
                errorClass: 'error-span',
                errorElement: 'span',
                rules: {
                    packTitle: {
                        required: true
                    },
                    packPrice: {
                        required: true
                    },
                    packVipPrice: {
                        required: true
                    },
                    packDistributionPrice: {
                        required: true
                    },
                    productAmount: {
                        required: true
                    }
                },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-success').addClass('has-error');
                },

                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },
                success: function (label) {
                    label.addClass('valid')
                        .closest('.form-group').removeClass('has-error').addClass('has-success');

                }
            });
        };

        var savePack = function () {
            if (wizform.valid() == false) return false;
            var pack = {};
            pack.packId = id;
            pack.packTitle = $("input[name=packTitle]").val();

            pack.packPrice = $("input[name=packPrice]").val();
            pack.packVipPrice = $("input[name=packVipPrice]").val();
            pack.packDistributionPrice = $("input[name=packDistributionPrice]").val();
            pack.productAmount = $("input[name=productAmount").val();
            pack.startDate = $("input[name=startDate]").val();
            pack.endDate = $("input[name=endDate]").val();
            pack.remark = $("[name=remark]").val();
            pack.productIds = selectProducts.toString();
            pack.useCoupon = $("[name=useCoupon]").prop("checked")

            pack.cumulative = $("[name=cumulative]").prop("checked")

            if (selectProducts.length === 0) {
                $.alert("请设置参与活动的商品");
                return false;
            }
            var n = {}, r = []; //n为hash表，r为临时数组
            for (var i = 0; i < selectProducts.length; i++) //遍历当前数组
            {
                if (!n[selectProducts[i]]) //如果hash表中没有当前项
                {
                    n[selectProducts[i]] = true; //存入hash表
                    r.push(selectProducts[i]); //把当前数组的当前项push到临时数组里面
                }
            }

            pack.productIds = r;
            $.blockUI();
            var url = App.getContextPath() + "admin/productpack/addProductPack.do";


            $.ajax({
                type: "post",
                url: url,
                data: $.param({pack: JSON.stringify(pack)}),
                async: true,
                success: function (result) {
                    $.unblockUI();
                    if (result.type == "error") {
                        $.alert(result.content);
                    } else {
                        location.href = "product_pack.html";
                    }
                }
            });
        };
        //获取活动详情
        var getPack = function (id) {
            $.ajax({
                type: "post",
                url: App.getContextPath() + "admin/productpack/getProductPack.do",
                data: {id: id},
                async: true,
                success: function (result) {
                    $("[name=packTitle]").val(result.packTitle);
                    $("[name=packPrice]").val(result.packPrice);
                    $("[name=packVipPrice]").val(result.packVipPrice);
                    $("[name=packDistributionPrice]").val(result.packDistributionPrice);
                    $("[name=remark]").text(result.remark);
                    $("[name=productAmount]").val(result.productAmount);
                    $("[name=startDate]").val(new Date(parseInt(result.startDate)).format("yyyy-MM-dd"));
                    $("[name=endDate]").val(new Date(parseInt(result.endDate)).format("yyyy-MM-dd"));
                    $("[name=useCoupon]").prop("checked", result.useCoupon);
                    $("[name=cumulative]").prop("checked", result.cumulative);
                    editProduct();


                }
            });
        };

        var searchProduct = function () {
            var url = App.getContextPath() + "admin/product/searchProductList.do?q=" + $("input[name=q]").val();
            if (id && id.length > 0) {
                url += "&packId=" + id;
            }

            if ($mainDataTable) {
                $mainDataTable.api().ajax.url(url).load();
                return;
            }
            var dtSetting = $.dataTableSetting({
                "ajaxSource": url,
                "serverSide": true,
                "bFilter": false,// 去掉搜索框
                "bLengthChange": true,// 每页显示数量
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "iDisplayLength": 10,

                "bSort": false,
                "aoColumns": [{
                    "mDataProp": "id",
                    "sTitle": "ID",
                    "width": "5%"
                }, {
                    "mDataProp": "packTitle",
                    "sTitle": "产品名称",
                    "width": "65%",
                    "render": function (data, type, row) {

                        return "<div style='display: inline-flex'><div><img width=50 height=50 src=" + getProductImage(row.imageUrl, "-200*200.jpg") + "></div><div><a href='" + App.getDomain() + "/product/product.html?productId=" + row.id + "' target='_blank'>" + row.productName + "</a><br><span class='text-danger'>￥" + row.productSalePrice + " </span></div></div>";

                    }
                }
                    , {
                        "sTitle": "颜色",
                        "mDataProp": "shortName",
                        "width": "15%"

                    }
                    , {
                        "sTitle": "销售价",
                        "mDataProp": "imageUrl",
                        "class": "hide",
                        "width": "0%"

                    }
                    , {
                        "sTitle": "操作",
                        "width": "15%",
                        "render": function (data, type, row) {
                            return "<a class='btn btn-success btn-add btn-width'  href='javascript:;'><i class='fa fa-pencil-square-o'></i>加入已选</a>";

                        }

                    }]
            });

            $mainDataTable = $("#productpack_product").dataTable(dtSetting);
        }

        var editProduct = function () {
            if ($selectedDataTable) {
                $selectedDataTable.api().ajax.url(editUrl).load();
                return;
            }
            var dtSetting = $.dataTableSetting({
                "ajaxSource": editUrl,
                "serverSide": true,
                "bFilter": false,// 去掉搜索框
                "bLengthChange": true,// 每页显示数量
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "iDisplayLength": 500,
                "bSort": false,

                "aoColumns": [{
                    "mDataProp": "id",
                    "sTitle": "ID",
                    "width": "5%"
                }, {
                    "mDataProp": "packTitle",
                    "sTitle": "产品名称",
                    "width": "65%",
                    "render": function (data, type, row) {

                        return "<div style='display: inline-flex'><div><img width=50 height=50 src=" + getProductImage(row.detailImagePath, "-200*200.jpg") + "></div><div><a href='" + App.getDomain() + "/product/product.html?productId=" + row.id + "' target='_blank'>" + row.productName + "</a><br><span class='text-danger'>￥" + row.productSalePrice + " </span></div></div>";

                    }
                }
                    , {
                        "sTitle": "颜色",
                        "mDataProp": "shortName",
                        "width": "15%"

                    }

                    , {
                        "sTitle": "操作",
                        "width": "15%",
                        "render": function (data, type, row, meta) {
                            selectProducts.push(row.id)
                            return "<a class='btn btn-danger btn-delete btn-width' i=" + meta.row + "  productid=" + row.id + " href='javascript:;'><i class='fa fa-pencil-square-o'></i>取消</a>";

                        }

                    }]
            });

            $selectedDataTable = $("#td_selectproduct").dataTable(dtSetting);
        }
        var editUrl = null;
        return {
            init: function () {
                App.init();
                formValiInit();

                $.initDate($("#rangDate"), 0, 15);
                $("input[name=startDate]").bsdatepicker("setValue", $.nowDate());
                $(".bt-submit").click(savePack);
                flag = $.getUrlParam("flag");
                id = $.getUrlParam("id");
                editUrl = App.getContextPath() + "admin/productpack/getProductListByProductPackId.do?productPackId=0";

                if (id != null) {
                    getPack(id);
                    editUrl = App.getContextPath() + "admin/productpack/getProductListByProductPackId.do?productPackId=" + id;
                } else {
                    editProduct();
                }
                $("#td_selectproduct").on("click", ".btn-delete", function () {
                    var id = $(this).attr("productid");
                    $(this).closest("tr").remove();
                    var newArr = [];
                    $.each(selectProducts, function (index, item) {
                        if (item != id) newArr.push(item);
                    });
                    setTimeout(function () {
                        selectProducts = newArr;
                    }, 500);

                });
                //选择商品
                $(".search").click(function () {
                    $("#productpack_detail").modal("show");
                    $(".searchProduct").off("click").click(searchProduct);
                    $("#productpack_product").off("click").on("click", ".btn-add", function () {
                        var tr = $(this).closest("tr");
                        var id = $(tr).find("td:eq(0)").html();
                        var productTr = "<tr>"
                        productTr += "<td>" + id + "</td>"
                        productTr += "<td>" + $(tr).find("td:eq(1)").html() + "</td>"
                        productTr += "<td>" + $(tr).find("td:eq(2)").html() + "</td>"
                        productTr += "<td><a class='btn btn-danger btn-delete ' productid=" + id + "><i class='fa fa-pencil-square-o'></i>取消</a></td>"
                        productTr += "</tr>"
                        if (selectProducts.length == 0) {
                            $("#td_selectproduct").find("tbody").empty();
                        }
                        selectProducts.push(parseInt($(tr).find("td:eq(0)").html()))
                        $("#td_selectproduct").find("tbody").prepend(productTr);

                        $(tr).remove();
                    });
                })

            }
        }
    }();
    $(function () {
        $("#header").load("../head.html");
        AddPack.init();
    });
</script>

<!-- /JAVASCRIPTS -->
</body>

</html>